<template>
	<view >
		<!-- 顶部背景 -->
		<user-space-head :userinfo="userinfo"></user-space-head>
		<!-- 浏览量统计 -->
		<view class="user-space-data">
			<home-data :homedata="homedata"></home-data> 
			<view class="line" style="height:20rpx; background:#CCCCCC;"></view>
		</view>
		<view class="tabbar">
			<tabBar :tabBars="tabBars" :tabIndex="tabIndex" @toIndex='toIndex' :scrollItemstyle='"width:33.33%"' scrollStyle="border-bottom:1rpx;"></tabBar>
		</view>
		<!-- 主页 -->
		
		<block v-for="(item,index) in tabList" :key='index'>
			
			<template v-if="tabIndex==0">
				<user-space-userinfo v-if="tabIndex==index" :userinfo="userinfo"></user-space-userinfo>
			</template>
			
			<template v-else-if="tabIndex==index">
				<block v-for="(list,listIndex) in item.list" :key="listIndex">
					<commonList :item="list"></commonList>
				</block>
				<loadMore :loadtext="item.textload"></loadMore>
			</template>
		</block>
		
		<!-- 操作菜单 -->
		<user-space-popup :show="show" @hiddenpopup="hiddenpopup" @lahei="lahei" @beizhu='beizhu'></user-space-popup>
	
	</view>
</template>

<script> 
	import userSpaceHead from '../../components/user-space-head/user-space-head.vue'
	import homeData from '../../components/home/home-data.vue'
	import tabBar from '../../components/tabbar/tabbar.vue'
	import userSpaceUserinfo from '../../components/user-space-head/user-space-userinfo.vue'
	import commonList from "../../components/common-list/common-list.vue";
	import loadMore from '../../components/common/load-more.vue'
	import userSpacePopup from '../../components/user-space-head/user-space-popup.vue' 
	export default {
		components:{
			userSpaceHead, 
			homeData,
			tabBar,
			userSpaceUserinfo,
			commonList,
			loadMore,
			userSpacePopup
		},
		data() {
			return {
				show:false,
				tabIndex: 0,
				tabList: [
					{},
					{
						textload: "加载更多...",
						list: [{
								userpic: '../../static/demo/userpic/4.jpg',
								username: '哈哈',
								sex: 1, // 0 男，1 女
								age: 25,
								isguanzhu: false,
								title: '我是标题',
								titlepic: '../../static/demo/datapic/9.jpg',
								video: {
									looknum: "20w",
									long: '2:47'
								},
								share: false,
								path: "深圳 龙岗",
								sharenum: 20,
								commentnum: 30,
								goodnum: 20
							},
							// 分享
							{
								userpic: '../../static/demo/userpic/7.jpg',
								username: '哈哈',
								sex: 0, // 0 男，1 女
								age: 25,
								isguanzhu: false,
								title: '我是标题',
								titlepic: '',
								video: false,
								share: {
									title: '我是分享标题',
									titlepic: '../../static/demo/datapic/42.jpg'
								},
								path: "深圳 龙岗",
								sharenum: 20,
								commentnum: 30,
								goodnum: 20
							},
							{
								userpic: '../../static/demo/userpic/6.jpg',
								username: '哈哈',
								sex: 0, // 0 男，1 女
								age: 25,
								isguanzhu: false,
								title: '我是标题',
								titlepic: '../../static/demo/datapic/10.jpg',
								video: {
									looknum: "20w",
									long: '2:47'
								},
								share: false,
								path: "深圳 龙岗",
								sharenum: 20,
								commentnum: 30,
								goodnum: 20
							},
							{
								userpic: '../../static/demo/userpic/6.jpg',
								username: '哈哈',
								sex: 0, // 0 男，1 女
								age: 25,
								isguanzhu: false,
								title: '我是标题',
								titlepic: '../../static/demo/datapic/7.jpg',
								video: {
									looknum: "20w",
									long: '2:47'
								},
								share: false,
								path: "深圳 龙岗",
								sharenum: 20,
								commentnum: 30,
								goodnum: 20
							},
						]
					},
					{
						textload: "加载更多...",
						list: [
							{
								userpic: '../../static/demo/userpic/4.jpg',
								username: '哈哈',
								sex: 0, // 0 男，1 女
								age: 26,
								isguanzhu: false,
								title: '我是标题',
								titlepic: '../../static/demo/datapic/9.jpg',
								video: {
									looknum: "20w",
									long: '2:47'
								},
								share: false,
								path: "深圳 龙岗",
								sharenum: 20,
								commentnum: 30,
								goodnum: 20
							},
							// 分享
							{
								userpic: '../../static/demo/userpic/7.jpg',
								username: '哈哈',
								sex: 0, // 0 男，1 女
								age: 25,
								isguanzhu: false,
								title: '我是标题',
								titlepic: '',
								video: false,
								share: {
									title: '我是分享标题',
									titlepic: '../../static/demo/datapic/42.jpg'
								},
								path: "深圳 龙岗",
								sharenum: 20,
								commentnum: 30,
								goodnum: 20
							},
							{
								userpic: '../../static/demo/userpic/6.jpg',
								username: '哈哈',
								sex: 0, // 0 男，1 女
								age: 25,
								isguanzhu: false,
								title: '我是标题',
								titlepic: '../../static/demo/datapic/10.jpg',
								video: {
									looknum: "20w",
									long: '2:47'
								},
								share: false,
								path: "深圳 龙岗",
								sharenum: 20,
								commentnum: 30,
								goodnum: 20
							},
							{
								userpic: '../../static/demo/userpic/6.jpg',
								username: '哈哈',
								sex: 0, // 0 男，1 女
								age: 25,
								isguanzhu: false,
								title: '我是标题',
								titlepic: '../../static/demo/datapic/7.jpg',
								video: {
									looknum: "20w",
									long: '2:47'
								},
								share: false,
								path: "深圳 龙岗",
								sharenum: 20,
								commentnum: 30,
								goodnum: 20
							},
						]
					},
				],
				userinfo:{
					isguanzhu:false,
					bgimageindex:1,
					userpic : '../../static/demo/userpic/6.jpg',
					username :"史威权",
					sex:0,
					age:20 ,
					id:1314,
					regTime:'2019-02-14',
					birthday: "1995-02-14",
					zy:'IT',
					pickerText:'河南 郑州',
					qg:'未婚'
				},
				homedata:[ 
					{name:'获赞',num:'10k'},
					{name:'关注',num:11},
					{name:'粉丝',num:12}
				],
				
				tabBars: [
					{name: '主页',id: 'zhuye'},
					{name: '糗事',id: 'qiushi'},
					{name: '动态',id: 'dongtai'}
				],
				
			}
		},
		//触底事件
		onReachBottom() {
			this.loadmore()
		},
		onNavigationBarButtonTap(e){
			if(e.index == 0){
				this.hiddenpopup()
			}
			
		},
		methods: {
			// 切换菜单栏的显示/隐藏
			hiddenpopup(){
				this.show =!this.show
			},
			// 拉黑
			lahei(){
				console.log('拉黑')
				this.hiddenpopup()
			},
			// 备注
			beizhu(){
				console.log('备注')
				this.hiddenpopup()
			},
			toIndex(data){
				console.log()
				this.tabIndex = data
			},
			// 下拉刷新数据
			getdata(){
				setTimeout(()=>{
					let arr = [
						{
							userpic: '../../static/demo/userpic/4.jpg',
							username: '哈哈111111',
							sex: 0, // 0 男，1 女
							age: 25,
							isguanzhu: false,
							title: '我是标题111111',
							titlepic: '../../static/demo/datapic/9.jpg',
							video: {
								looknum: "20w",
								long: '2:47'
							},
							share: false,
							path: "深圳 龙岗",
							sharenum: 20,
							commentnum: 30,
							goodnum: 20
						},
						// 分享
						{
							userpic: '../../static/demo/userpic/7.jpg',
							username: '哈哈',
							sex: 0, // 0 男，1 女
							age: 25,
							isguanzhu: false,
							title: '我是标题',
							titlepic: '',
							video: false,
							share: {
								title: '我是分享标题',
								titlepic: '../../static/demo/datapic/42.jpg'
							},
							path: "深圳 龙岗",
							sharenum: 20,
							commentnum: 30,
							goodnum: 20
						},
						{
							userpic: '../../static/demo/userpic/6.jpg',
							username: '哈哈',
							sex: 0, // 0 男，1 女
							age: 25,
							isguanzhu: false,
							title: '我是标题',
							titlepic: '../../static/demo/datapic/10.jpg',
							video: {
								looknum: "20w",
								long: '2:47'
							},
							share: false,
							path: "深圳 龙岗",
							sharenum: 20,
							commentnum: 30,
							goodnum: 20
						},
						{
							userpic: '../../static/demo/userpic/6.jpg',
							username: '哈哈',
							sex: 0, // 0 男，1 女
							age: 25,
							isguanzhu: false,
							title: '我是标题',
							titlepic: '../../static/demo/datapic/7.jpg',
							video: {
								looknum: "20w",
								long: '2:47'
							},
							share: false,
							path: "深圳 龙岗",
							sharenum: 20,
							commentnum: 30,
							goodnum: 20
						},
					
					]
					this.tabList[this.tabIndex].list = arr;
					uni.stopPullDownRefresh();
				},2000)
			},
			// 加载更多
			loadmore() {
				console.log('shangl')
				console.log(this.tabIndex)
			
				if (this.tabList[this.tabIndex].textload !== '加载更多...') {
					return;
				}
				this.tabList[this.tabIndex].textload = '加载中'
				console.log(this.tabList[this.tabIndex].textload)
				// this.guanzhu.loadtext = '没有更多'
				setTimeout(() => {
					let obj = {
						userpic: '../../static/demo/userpic/4.jpg',
						username: '哈哈',
						sex: 0, // 0 男，1 女
						age: 25,
						isguanzhu: false,
						title: '我是标题',
						titlepic: '../../static/demo/datapic/9.jpg',
						video: {
							looknum: "20w",
							long: '2:47'
						},
						share: false,
						path: "深圳 龙岗",
						sharenum: 20,
						commentnum: 30,
						goodnum: 20
					}
					this.tabList[this.tabIndex].list.push(obj)
					this.tabList[this.tabIndex].textload = '加载更多...'
				}, 1000);
			},
		}
	}
</script>

<style>
	.user-space-margin{
		margin: 10upx 0;
	}
	.user-space-data {
		position:relative;
		top:-15upx;
		background: #FFFFFF;
		border-top-left-radius: 20upx;
		border-top-right-radius:20upx;
	}
	.tabbar .tabs .uni-tab-item-title-active .line {
		background: #007AFF!important;
		height:10upx;
	}
	
	
	
</style>
